<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>抽奖转盘</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="wheelpage.css">
</head>
<body>
<div id="wheel-wrap">
    <div id="w-tit">
        幸运大转盘
    </div>
    <div id="w-main">
        <div id="rotate">
            <div id="pointer"></div>
            <div id="rotatein">
                <div class="prize prize_1"><strong>笔记本</strong><br><span>笔记本一本</span></div>
                <div class="prize prize_2"><strong>未中奖</strong><br><span>谢谢参与</span></div>
                <div class="prize prize_3"><strong>笔</strong><br><span>1根</span></div>
                <div class="prize prize_4"><strong>未中奖</strong><br><span>谢谢参与</span></div>
                <div class="prize prize_5"><strong>俯卧撑</strong><br><span>10个</span></div>
                <div class="prize prize_6"><strong>未中奖</strong><br><span>谢谢参与</span></div>
                <div class="prize prize_7"><strong>下蹲</strong><br><span>10个</span></div>
                <div class="prize prize_8"><strong>未中奖</strong><br><span>谢谢参与</span></div>
            </div>
        </div>
    </div>
<!--    <div id="w-foot">-->
<!--        <div class="tiemsbox">您还有<span class="times"></span>次抽奖机会</div>-->
<!--        <p id="rule">查看活动规则</p>-->
<!--    </div>-->
    <div id="dialogbox">
        <div class="dialogmask"></div>
        <div class="dialogcard">
            <div class="dialogclose">
                <span class="closebtn"></span>
            </div>
            <div class="card1">
                <div class="dialogtit">恭喜您获得 <br><span id="award"></span></div>
            </div>
            <div class="card2">
                <p>很遗憾没中奖</p>
            </div>
<!--            <div class="card3">-->
<!--                <p>您的<span class="times"></span>次机会已用完</p>-->
<!--            </div>-->
        </div>
    </div>
</div>
<script type="text/javascript">
    setSize();
    window.addEventListener("resize",setSize,false);
    function setSize(){
        var oHtml = document.getElementsByTagName("html")[0];
        var oBody = document.getElementsByTagName("body")[0];
        var oWidth = window.innerWidth < 480 ? window.innerWidth : 480;
        oHtml.style.fontSize =oWidth/18+"px";
        oBody.style.visibility = "visible";
    };
</script>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript">
    $(function () {
        //raward 获奖情况
        var flag = 0;
        function raward(rotate){
            switch (rotate){
                case 337.5 :{flag=1; return '笔记本';break;}
                case 292.5 :{flag=2;break;}
                case 247.5 :{flag=1; return '笔';break;}
                case 202.5 :{flag=2;break;}
                case 157.5 :{flag=1; return '俯卧撑';break;}
                case 112.5 :{flag=2;break;}
                case 67.5 :{ flag=1; return '下蹲';break;}
                case 22.5 :{ flag=2;break;}
                default : {flag=2; return '很遗憾未中奖'}
            }
        }
        //确定概率
        function posibility(){
            var random = parseInt(Math.random()*1000);
            if(random == 1){
                return 67.5;
            }else if( 1 < random && random <= 200 ){
                return 67.5;
            }else if( 1 < random && random <= 200 ){
                return 157.5;
            }else if( 1 < random && random <= 200 ){
                return 67.5;
            }else if( 1 < random && random <= 200 ){
                return 292.5;
            }else if( 1 < random && random <= 200){
                return 202.5;
            }else if( 1 < random && random <= 200){
                return 112.5;
            }else{
                return 112.5;
            }
        };

        //转盘逻辑
        var initrotate = 0;
        function handlebar() {
            var rotate = initrotate + (360 - initrotate%360) + 360 + posibility();
            $("#rotatein").css({
                "-webkit-transition": "all 2s ease-out",
                "-ms-transition": "all 2s ease-out",
                "transition":" all 2s ease-out",
                "-webkit-transform": "rotate("+ rotate +"deg)",
                "-moz-transform": "rotate("+ rotate +"deg)",
                "-ms-transform": "rotate("+ rotate +"deg)",
                "-o-transform": "rotate("+ rotate +"deg)",
                "transform":"rotate("+ rotate +"deg)"
            });
            initrotate = rotate;
            var rawartText = raward(rotate%360);
            setTimeout(function () {
                dialoginfo(flag , rawartText);
            },2100)
        };

        //点击
        var timecont = 1000;
        var oDialog = $("#dialogbox");
        //$(".times").text(timecont);
        $(".closebtn ").click(function () {
            $(oDialog).removeClass("active");
            $(oDialog).find("div[class^='card']").removeClass("active");
        });
        $(".dialogmask").click(function () {
            $(oDialog).removeClass("active");
            $(oDialog).find("div[class^='card']").removeClass("active");
        });
        $("#pointer").click(function () {
            if(timecont > 0){
                handlebar();
            }else if(timecont == 0){
                flag = 3;
                dialoginfo(flag);
                timecont ++ ;
            };
            timecont -- ;
            $(".times ").text(timecont);

        });


        //dialog
        function dialoginfo(flag,rawartText){
            $(oDialog).find("div[class^='card']").removeClass("active");
            if(flag == 1){
                $(oDialog).find(".card1").addClass("active");
                $(oDialog).find("#award").text(""+ rawartText +"");
                $(oDialog).addClass("active");
            }else if (flag == 2){
                $(oDialog).find(".card2").addClass("active");
                $(oDialog).addClass("active");
            }else if(flag == 3){
                $(oDialog).find(".card3").addClass("active");
                $(oDialog).addClass("active");
            }
        };

        //获奖信息
    });
</script>
</body>
</html>